<!DOCTYPE html>
<!-- saved from url=(0032)http://127.0.0.1:5500/index.html -->
<html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简约社区平台</title>
    <script src="./简约社区平台_files/saved_resource"></script>
    <script src="./简约社区平台_files/iconify-icon.min.js.下载"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1A2B50',
                        secondary: '#F5F7FA',
                        accent: '#FF6B35',
                        code: '#2D3748',
                        success: '#38A169',
                        error: '#E53E3E',
                        textLight: '#718096'
                    }
                }
            }
        }
    </script>
    <style>
        body {
            background-color: #E5E7EB;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding: 32px 0;
            margin: 0;
        }
        
        .container {
            width: 100%;
            max-width: 1440px;
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            overflow: hidden;
            border: 1px solid #EDF2F7;
        }
        
        .banner {
            background-color: #1A2B50;
            text-align: center;
            padding: 24px 0;
            position: relative;
        }
        
        .banner-title {
            color: white;
            font-weight: 700;
            font-size: 32px;
            margin: 0;
            font-family: 'Inter', sans-serif;
        }
        
        .banner::after {
            content: '';
            display: block;
            width: 80%;
            height: 1px;
            background: rgba(255,255,255,0.1);
            margin: 16px auto 0;
        }
        
        .tabs {
            display: flex;
            padding: 16px 24px;
            border-bottom: 1px solid #EDF2F7;
            gap: 16px;
        }
        
        .tab {
            padding: 6px 16px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            border: 1px solid #E2E8F0;
            color: #718096;
        }
        
        .tab.active {
            background-color: #1A2B50;
            color: white;
            border-color: #1A2B50;
        }
        
        .posts {
            padding: 16px 24px;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
            gap: 24px;
        }
        
        .post-card {
            border: 1px solid #E2E8F0;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .post-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        
        .post-title {
            font-size: 20px;
            font-weight: 600;
            color: #1a202c;
            margin: 0 0 12px 0;
        }
        
        .post-content {
            color: #4a5568;
            line-height: 1.6;
            height: 45px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        
        .post-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 16px;
            color: #718096;
            font-size: 12px;
        }
        
        .author {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .post-thumbnail {
            border-radius: 6px;
            height: 120px;
            width: 100%;
            object-fit: cover;
            margin-bottom: 16px;
        }
        
        .floating-btn {
            position: fixed;
            right: 32px;
            bottom: 32px;
            background-color: #FF6B35;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 12px 20px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(255,107,53,0.3);
            display: flex;
            align-items: center;
            gap: 8px;
            text-wrap: nowrap;
            transition: all 0.3s ease;
        }
        
        .floating-btn:hover {
            background-color: #e55a2a;
            transform: translateY(-2px);
        }
        
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 100;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }
        
        .modal.active {
            opacity: 1;
            visibility: visible;
        }
        
        .modal-content {
            background-color: white;
            width: 600px;
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
            max-height: 90vh;
            overflow-y: auto;
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .modal-title {
            font-size: 24px;
            font-weight: 600;
            margin: 0;
        }
        
        .close-btn {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #718096;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 6px;
            font-weight: 500;
            color: #4a5568;
        }
        
        .form-input {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #E2E8F0;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .form-input:focus {
            outline: none;
            border-color: #1A2B50;
        }
        
        .form-textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #E2E8F0;
            border-radius: 4px;
            min-height: 150px;
            font-size: 14px;
            resize: vertical;
        }
        
        .form-actions {
            display: flex;
            gap: 12px;
            justify-content: flex-end;
            margin-top: 20px;
        }
        
        .btn {
            padding: 10px 20px;
            border-radius: 4px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .btn-primary {
            background-color: #1A2B50;
            color: white;
            border: none;
        }
        
        .btn-primary:hover {
            background-color: #14223a;
        }
        
        .btn-outline {
            background: none;
            border: 1px solid #E2E8F0;
            color: #4a5568;
        }
        
        .btn-outline:hover {
            background-color: #f7fafc;
        }
        
        .btn-danger {
            background-color: #E53E3E;
            color: white;
            border: none;
        }
        
        .btn-danger:hover {
            background-color: #c53030;
        }
        
        .detail-header {
            padding: 0 24px;
            margin-bottom: 24px;
            border-bottom: 1px solid #EDF2F7;
            padding-bottom: 24px;
        }
        
        .detail-title {
            font-size: 24px;
            margin: 0;
            color: #1a202c;
            font-weight: 600;
            margin-bottom: 16px;
        }
        
        .detail-content {
            margin-bottom: 32px;
            line-height: 1.8;
            color: #4a5568;
            padding: 0 24px;
        }
        
        .post-images {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin: 16px 0;
        }
        
        .post-image {
            max-width: 100%;
            border-radius: 8px;
        }
        
        .code-block {
            background-color: #2D3748;
            color: #e2e8f0;
            padding: 16px;
            border-radius: 6px;
            font-family: monospace;
            margin: 20px 0;
            position: relative;
            overflow-x: auto;
        }
        
        .copy-btn {
            position: absolute;
            top: 8px;
            right: 8px;
            background: rgba(255,255,255,0.1);
            color: white;
            border: none;
            border-radius: 4px;
            padding: 4px 8px;
            font-size: 12px;
            cursor: pointer;
        }
        
        .copy-btn:hover {
            background: rgba(255,255,255,0.2);
        }
        
        .link {
            color: #4299e1;
            text-decoration: underline;
        }
        
        .comments-section {
            padding: 0 24px 24px;
        }
        
        .comments-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 24px;
        }
        
        .comments-title {
            font-size: 18px;
            font-weight: 600;
            margin: 0;
        }
        
        .comment-form {
            display: flex;
            gap: 12px;
            margin-bottom: 24px;
            align-items: flex-end;
        }
        
        .comment-input-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .comment-input {
            width: 100%;
            padding: 12px;
            border: 1px solid #E2E8F0;
            border-radius: 4px;
        }
        
        .comment-actions {
            display: flex;
            gap: 12px;
        }
        
        .comment-btn {
            background-color: #1A2B50;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 0 20px;
            cursor: pointer;
        }
        
        .comment-btn:hover {
            background-color: #14223a;
        }
        
        .image-upload-btn {
            background: none;
            border: 1px solid #E2E8F0;
            color: #4a5568;
            border-radius: 4px;
            padding: 0 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .image-upload-btn:hover {
            background-color: #f7fafc;
        }
        
        .comment {
            padding: 16px;
            border-bottom: 1px solid #EDF2F7;
            position: relative;
        }
        
        .comment-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
        }
        
        .comment-author {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 500;
        }
        
        .comment-time {
            font-size: 12px;
            color: #718096;
        }
        
        .comment-reply {
            color: #4299e1;
            font-size: 12px;
            cursor: pointer;
        }
        
        .comment-image {
            max-width: 300px;
            border-radius: 4px;
            margin: 8px 0;
        }
        
        .back-btn {
            background-color: #1A2B50;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 8px 16px;
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            margin: 24px 24px 0;
        }
        
        .back-btn:hover {
            background-color: #14223a;
        }
        
        .detail-image {
            width: 100%;
            border-radius: 8px;
            margin: 20px 0;
        }
        
        .hidden {
            display: none;
        }

        /* 删除按钮样式 */
        .delete-btn {
            color: #E53E3E;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .delete-btn:hover {
            text-decoration: underline;
        }
        
        .post-delete-btn {
            position: absolute;
            top: 12px;
            right: 12px;
            z-index: 10;
        }
        
        .detail-delete-container {
            display: flex;
            justify-content: flex-end;
            padding: 0 24px 16px;
        }
        
        /* 评论和发帖功能优化的样式 */
        .comment-input.error, .form-input.error, .form-textarea.error {
            border-color: #E53E3E;
        }
        
        .success-feedback {
            background-color: rgba(56, 161, 105, 0.1);
            color: #38A169;
        }
        
        .error-feedback {
            background-color: rgba(229, 62, 62, 0.1);
            color: #E53E3E;
        }
        
        .comment.new, .post-card.new {
            animation: fadeIn 0.5s ease;
            background-color: rgba(26, 43, 80, 0.03);
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .form-feedback {
            margin-top: 4px;
            font-size: 12px;
            height: 16px;
        }
        
        .loading-indicator {
            display: inline-block;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* 图片预览样式 */
        .image-previews {
            display: flex;
            gap: 8px;
            margin-top: 8px;
            flex-wrap: wrap;
        }
        
        .image-preview-container {
            width: 80px;
            height: 80px;
            position: relative;
        }
        
        .image-preview {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 4px;
        }
        
        .remove-image {
            position: absolute;
            top: -6px;
            right: -6px;
            background-color: #E53E3E;
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            cursor: pointer;
        }
        
        /* 上传进度条 */
        .upload-progress {
            height: 4px;
            background-color: #E2E8F0;
            border-radius: 2px;
            overflow: hidden;
            margin-top: 4px;
        }
        
        .progress-bar {
            height: 100%;
            background-color: #38A169;
            width: 0%;
            transition: width 0.3s ease;
        }
        
        /* 图片上传提示 */
        .upload-hint {
            font-size: 12px;
            color: #718096;
            margin-top: 4px;
        }

        /* 响应式设计 */
        @media (max-width: 1200px) {
            .posts {
                grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
            }
        }
        
        @media (max-width: 768px) {
            .posts {
                grid-template-columns: 1fr;
                padding: 16px;
            }
            
            .modal-content {
                width: 90%;
                max-width: 500px;
            }
            
            .floating-btn {
                right: 16px;
                bottom: 16px;
                padding: 10px 16px;
                font-size: 14px;
            }
            
            .detail-title {
                font-size: 20px;
            }
            
            .comment-image, .post-image {
                max-width: 100%;
            }
            
            .comment-form {
                flex-direction: column;
                align-items: stretch;
            }
            
            .comment-actions {
                justify-content: flex-end;
            }
        }
    </style>
<style>*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.mb-4{margin-bottom:1rem}.hidden{display:none}.rounded{border-radius:0.25rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.text-sm{font-size:0.875rem;line-height:1.25rem}</style></head>
<body>
    <div class="container">
        <header class="banner">
            <h1 class="banner-title">欢迎来到社区</h1>
        </header>
        
        <div class="tabs">
            <div class="tab active">最新</div>
            <div class="tab">热门</div>
        </div>
        
        <div class="posts" id="posts-container"><div class="post-card">
                    
                    <h3 class="post-title">使用React Hooks优化组件性能</h3>
                    <img src="./简约社区平台_files/aigp_1755248023.jpeg" alt="使用React Hooks优化组件性能" class="post-thumbnail">
                    <p class="post-content">在本文中，我们将探讨如何使用React Hooks来优化组件性能和状态管理。你将学习到useMemo和useCallback的最佳实践。
                
              ...</p>
                    <div class="post-footer">
                        <div class="author">
                            <iconify-icon icon="mdi:account-circle"><template shadowrootmode="open"><style data-style="data-style">:host{display:inline-block;vertical-align:0}span,svg{display:block}</style><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 19.2c-2.5 0-4.71-1.28-6-3.2c.03-2 4-3.1 6-3.1s5.97 1.1 6 3.1a7.23 7.23 0 0 1-6 3.2M12 5a3 3 0 0 1 3 3a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3m0-3A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10c0-5.53-4.5-10-10-10"></path></svg></template></iconify-icon>
                            <span>前端开发者</span>
                        </div>
                        <div class="post-date">2023-08-10</div>
                    </div>
                </div><div class="post-card">
                    
                    <h3 class="post-title">JavaScript异步编程完全指南</h3>
                    <img src="./简约社区平台_files/aigp_1755248024.jpeg" alt="JavaScript异步编程完全指南" class="post-thumbnail">
                    <p class="post-content">从回调到Promise再到async/await，这篇指南将带你了解现代JavaScript中的异步编程模式及其应用场景。
                
                JavaS...</p>
                    <div class="post-footer">
                        <div class="author">
                            <iconify-icon icon="mdi:account-circle"><template shadowrootmode="open"><style data-style="data-style">:host{display:inline-block;vertical-align:0}span,svg{display:block}</style><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 19.2c-2.5 0-4.71-1.28-6-3.2c.03-2 4-3.1 6-3.1s5.97 1.1 6 3.1a7.23 7.23 0 0 1-6 3.2M12 5a3 3 0 0 1 3 3a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3m0-3A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10c0-5.53-4.5-10-10-10"></path></svg></template></iconify-icon>
                            <span>JS专家</span>
                        </div>
                        <div class="post-date">2023-08-08</div>
                    </div>
                </div></div>
        
        <!-- 详情页面 (默认隐藏) -->
        <div class="hidden" id="post-detail">
            <button class="back-btn" onclick="closePostDetail()">
                <iconify-icon icon="mdi:arrow-left"><template shadowrootmode="open"><style data-style="data-style">:host{display:inline-block;vertical-align:0}span,svg{display:block}</style><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20 11v2H8l5.5 5.5l-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5L8 11z"></path></svg></template></iconify-icon>
                返回列表
            </button>
            
            <div class="detail-delete-container">
                <button class="delete-btn" id="detail-post-delete-btn">
                    <iconify-icon icon="mdi:delete"><template shadowrootmode="open"><style data-style="data-style">:host{display:inline-block;vertical-align:0}span,svg{display:block}</style><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M19 4h-3.5l-1-1h-5l-1 1H5v2h14M6 19a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7H6z"></path></svg></template></iconify-icon>
                    删除帖子
                </button>
            </div>
            
            <div class="detail-header">
                <h2 class="detail-title" id="detail-title"></h2>
                <div class="post-footer">
                    <div class="author">
                        <iconify-icon icon="mdi:account-circle"><template shadowrootmode="open"><style data-style="data-style">:host{display:inline-block;vertical-align:0}span,svg{display:block}</style><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 19.2c-2.5 0-4.71-1.28-6-3.2c.03-2 4-3.1 6-3.1s5.97 1.1 6 3.1a7.23 7.23 0 0 1-6 3.2M12 5a3 3 0 0 1 3 3a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3m0-3A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10c0-5.53-4.5-10-10-10"></path></svg></template></iconify-icon>
                        <span id="detail-author"></span>
                    </div>
                    <div class="post-date" id="detail-date"></div>
                </div>
            </div>
            
            <div class="detail-content" id="detail-content">
                <!-- 内容会动态加载 -->
            </div>
            
            <!-- 帖子图片区域 -->
            <div class="post-images" id="post-images-container">
                <!-- 帖子图片会动态加载 -->
            </div>
            
            <!-- 评论区 -->
            <div class="comments-section">
                <div class="comments-header">
                    <h3 class="comments-title">评论 (<span id="comments-count">0</span>)</h3>
                </div>
                
                <div class="comment-form">
                    <div class="comment-input-container">
                        <input type="text" placeholder="写下你的评论..." class="comment-input" id="comment-input">
                        <div class="comment-actions">
                            <label class="image-upload-btn">
                                <iconify-icon icon="mdi:image"><template shadowrootmode="open"><style data-style="data-style">:host{display:inline-block;vertical-align:0}span,svg{display:block}</style><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m8.5 13.5l2.5 3l3.5-4.5l4.5 6H5m16 1V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2"></path></svg></template></iconify-icon>
                                图片
                                <input type="file" id="comment-image-upload" accept="image/*" multiple="" style="display: none;">
                            </label>
                        </div>
                        <div class="image-previews" id="comment-image-previews"></div>
                        <div class="upload-progress hidden" id="comment-upload-progress">
                            <div class="progress-bar" id="comment-progress-bar"></div>
                        </div>
                        <div class="upload-hint">最多3张图片，单张不超过5MB</div>
                    </div>
                    <button class="comment-btn" id="comment-submit">
                        <span id="submit-text">发布</span>
                        <span id="submit-loading" class="hidden">
                            <iconify-icon icon="mdi:loading"><template shadowrootmode="open"><style data-style="data-style">:host{display:inline-block;vertical-align:0}span,svg{display:block}</style><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8"></path></svg></template></iconify-icon>
                        </span>
                    </button>
                </div>
                
                <div id="comment-feedback" class="hidden mb-4 px-4 py-2 rounded text-sm"></div>
                <div id="comments-container">
                    <!-- 评论会动态加载 -->
                </div>
            </div>
        </div>
        
        <!-- 发布按钮 -->
        <button class="floating-btn" onclick="openModal()">
            <iconify-icon icon="mdi:pencil"><template shadowrootmode="open"><style data-style="data-style">:host{display:inline-block;vertical-align:0}span,svg{display:block}</style><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83l3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75z"></path></svg></template></iconify-icon>
            发布新帖
        </button>
        
        <!-- 发布模态框 -->
        <div class="modal" id="publish-modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">发布新帖</h3>
                    <button class="close-btn" onclick="closeModal()">
                        <iconify-icon icon="mdi:close"><template shadowrootmode="open"><style data-style="data-style">:host{display:inline-block;vertical-align:0}span,svg{display:block}</style><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"></path></svg></template></iconify-icon>
                    </button>
                </div>
                
                <div class="form-group">
                    <label class="form-label">标题</label>
                    <input type="text" class="form-input" id="post-title" placeholder="输入帖子标题">
                    <div class="form-feedback" id="title-feedback"></div>
                </div>
                
                <div class="form-group">
                    <label class="form-label">内容</label>
                    <textarea class="form-textarea" id="post-content" placeholder="在这里输入内容..."></textarea>
                    <div class="form-feedback" id="content-feedback"></div>
                </div>
                
                <div class="form-group">
                    <label class="form-label">添加图片</label>
                    <div class="comment-actions">
                        <label class="image-upload-btn">
                            <iconify-icon icon="mdi:image"><template shadowrootmode="open"><style data-style="data-style">:host{display:inline-block;vertical-align:0}span,svg{display:block}</style><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m8.5 13.5l2.5 3l3.5-4.5l4.5 6H5m16 1V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2"></path></svg></template></iconify-icon>
                            选择图片
                            <input type="file" id="post-image-upload" accept="image/*" multiple="" style="display: none;">
                        </label>
                    </div>
                    <div class="image-previews" id="post-image-previews"></div>
                    <div class="upload-progress hidden" id="post-upload-progress">
                        <div class="progress-bar" id="post-progress-bar"></div>
                    </div>
                    <div class="upload-hint">最多5张图片，单张不超过5MB</div>
                </div>
                
                <div class="form-actions">
                    <button class="btn btn-outline" onclick="closeModal()">取消</button>
                    <button class="btn btn-primary" id="post-submit">
                        <span id="post-submit-text">发布</span>
                        <span id="post-submit-loading" class="hidden loading-indicator">
                            <iconify-icon icon="mdi:loading"><template shadowrootmode="open"><style data-style="data-style">:host{display:inline-block;vertical-align:0}span,svg{display:block}</style><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8"></path></svg></template></iconify-icon>
                        </span>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 确认删除模态框 -->
        <div class="modal" id="confirm-delete-modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">确认删除</h3>
                    <button class="close-btn" onclick="closeConfirmDeleteModal()">
                        <iconify-icon icon="mdi:close"><template shadowrootmode="open"><style data-style="data-style">:host{display:inline-block;vertical-align:0}span,svg{display:block}</style><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"></path></svg></template></iconify-icon>
                    </button>
                </div>
                
                <p id="delete-confirmation-message">你确定要删除这个项目吗？此操作无法撤销。</p>
                
                <div class="form-actions">
                    <button class="btn btn-outline" onclick="closeConfirmDeleteModal()">取消</button>
                    <button class="btn btn-danger" id="confirm-delete-btn">确认删除</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 存储帖子数据
        let postsData = [
            {
                id: 1,
                title: "使用React Hooks优化组件性能",
                content: `<p>在本文中，我们将探讨如何使用React Hooks来优化组件性能和状态管理。你将学习到useMemo和useCallback的最佳实践。</p>
                
                <p>React Hooks自推出以来，已经成为React开发的标准方式。它们允许我们在不编写类的情况下使用状态和其他React特性。</p>
                
                <pre class="code-block">function Counter() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');
  
  // 只有当count变化时才会重新计算
  const doubleCount = useMemo(() => {
    return count * 2;
  }, [count]);
  
  // 只有当组件挂载和卸载时才会执行
  useEffect(() => {
    console.log('Component mounted');
    return () => {
      console.log('Component unmounted');
    };
  }, []);
  
  return (
    <div>
      <p>Count: {count}</p>
      <p>Double Count: {doubleCount}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <input value={name} onChange={(e) => setName(e.target.value)} />
    </div>
  );
}</pre>
                
                <p>使用useCallback可以记忆函数，防止不必要的重渲染：</p>
                
                <pre class="code-block">function ParentComponent() {
  const [count, setCount] = useState(0);
  
  // 只有当依赖变化时，这个函数才会重新创建
  const handleClick = useCallback(() => {
    console.log('Button clicked');
  }, []);
  
  return (
    <div>
      <ChildComponent onClick={handleClick} />
      <button onClick={() => setCount(count + 1)}>
        Increment: {count}
      </button>
    </div>
  );
}</pre>
                
                <p>通过合理使用这些Hooks，可以显著提升React应用的性能，特别是在处理大型列表或复杂计算时。</p>`,
                author: "前端开发者",
                date: "2023-08-10",
                thumbnail: "https://modao.cc/ai/uploads/ai_pics/13/138148/aigp_1755248023.jpeg",
                images: [],
                comments: [
                    { author: "React开发者", content: "非常实用的技巧，已经在项目中应用了！", time: "2023-08-11 09:23", images: [] }
                ]
            },
            {
                id: 2,
                title: "JavaScript异步编程完全指南",
                content: `<p>从回调到Promise再到async/await，这篇指南将带你了解现代JavaScript中的异步编程模式及其应用场景。</p>
                
                <p>JavaScript作为单线程语言，异步编程是其核心特性之一。让我们从最基础的回调函数开始：</p>
                
                <pre class="code-block">// 回调函数方式
function fetchData(callback) {
  setTimeout(() => {
    callback('Data received');
  }, 1000);
}

fetchData((data) => {
  console.log(data);
});</pre>
                
                <p>Promise解决了回调地狱问题：</p>
                
                <pre class="code-block">// Promise方式
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data received');
      // 出错时使用 reject('Error message');
    }, 1000);
  });
}

fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));</pre>
                
                <p>ES7引入的async/await让异步代码看起来像同步代码：</p>
                
                <pre class="code-block">// async/await方式
async function processData() {
  try {
    const data = await fetchData();
    console.log(data);
    return data;
  } catch (error) {
    console.error(error);
  }
}</pre>
                
                <p>现代JavaScript开发中，推荐使用async/await结合Promise的方式处理异步操作，使代码更清晰易读。</p>`,
                author: "JS专家",
                date: "2023-08-08",
                thumbnail: "https://modao.cc/ai/uploads/ai_pics/13/138149/aigp_1755248024.jpeg",
                images: [],
                comments: []
            }
        ];
        
        // 当前正在查看的帖子ID
        let currentPostId = null;
        // 待删除的项目信息
        let itemToDelete = null;
        // 评论中的图片预览
        let commentImages = [];
        // 帖子中的图片
        let postImages = [];
        
        // 图片处理配置
        const IMAGE_CONFIG = {
            maxWidth: 1200,       // 最大宽度
            maxHeight: 1200,      // 最大高度
            quality: 0.8,         // 压缩质量
            maxCommentImages: 3,  // 评论最大图片数
            maxPostImages: 5,     // 帖子最大图片数
            maxFileSize: 5 * 1024 * 1024  // 最大文件大小5MB
        };
        
        // 页面加载时渲染帖子列表
        document.addEventListener('DOMContentLoaded', () => {
            renderPosts();
            setupEventListeners();
        });
        
        // 设置事件监听器
        function setupEventListeners() {
            // 帖子详情页的删除按钮
            document.getElementById('detail-post-delete-btn').addEventListener('click', () => {
                if (currentPostId) {
                    const post = postsData.find(p => p.id === currentPostId);
                    if (post && post.author === "当前用户") {
                        itemToDelete = {
                            type: 'post',
                            id: currentPostId
                        };
                        openConfirmDeleteModal();
                    }
                }
            });
            
            // 确认删除按钮
            document.getElementById('confirm-delete-btn').addEventListener('click', performDelete);
            
            // 评论图片上传
            document.getElementById('comment-image-upload').addEventListener('change', handleCommentImageUpload);
            
            // 帖子图片上传
            document.getElementById('post-image-upload').addEventListener('change', handlePostImageUpload);
        }
        
        // 图片压缩处理
        function compressImage(file) {
            return new Promise((resolve, reject) => {
                // 检查文件大小
                if (file.size > IMAGE_CONFIG.maxFileSize) {
                    return reject(new Error('文件大小超过限制，最大为5MB'));
                }
                
                const reader = new FileReader();
                
                reader.onload = function(event) {
                    const img = new Image();
                    
                    img.onload = function() {
                        // 创建canvas元素
                        const canvas = document.createElement('canvas');
                        const ctx = canvas.getContext('2d');
                        
                        // 计算缩放比例
                        let width = img.width;
                        let height = img.height;
                        
                        // 如果图片尺寸超过最大值，按比例缩小
                        if (width > IMAGE_CONFIG.maxWidth || height > IMAGE_CONFIG.maxHeight) {
                            const ratio = Math.min(
                                IMAGE_CONFIG.maxWidth / width,
                                IMAGE_CONFIG.maxHeight / height
                            );
                            width = width * ratio;
                            height = height * ratio;
                        }
                        
                        // 设置canvas尺寸
                        canvas.width = width;
                        canvas.height = height;
                        
                        // 绘制图片到canvas
                        ctx.drawImage(img, 0, 0, width, height);
                        
                        // 将canvas内容转换为base64
                        canvas.toDataURL('image/jpeg', IMAGE_CONFIG.quality, (dataUrl) => {
                            resolve(dataUrl);
                        });
                    };
                    
                    img.onerror = function() {
                        reject(new Error('无法加载图片'));
                    };
                    
                    img.src = event.target.result;
                };
                
                reader.onerror = function() {
                    reject(new Error('文件读取失败'));
                };
                
                reader.readAsDataURL(file);
            });
        }
        
        // 处理评论图片上传
        async function handleCommentImageUpload(e) {
            const files = e.target.files;
            if (!files || files.length === 0) return;
            
            // 显示进度条
            const progressContainer = document.getElementById('comment-upload-progress');
            const progressBar = document.getElementById('comment-progress-bar');
            progressContainer.classList.remove('hidden');
            progressBar.style.width = '0%';
            
            try {
                // 计算总文件数和已处理数
                const totalFiles = Math.min(files.length, IMAGE_CONFIG.maxCommentImages - commentImages.length);
                let processedFiles = 0;
                
                // 处理每个文件
                for (let i = 0; i < files.length; i++) {
                    // 检查是否已达到最大数量
                    if (commentImages.length >= IMAGE_CONFIG.maxCommentImages) {
                        showFeedback(
                            document.getElementById('comment-feedback'), 
                            `最多只能上传${IMAGE_CONFIG.maxCommentImages}张图片`, 
                            true
                        );
                        document.getElementById('comment-feedback').classList.remove('hidden');
                        break;
                    }
                    
                    try {
                        // 压缩图片
                        const compressedDataUrl = await compressImage(files[i]);
                        
                        // 添加到评论图片数组
                        commentImages.push(compressedDataUrl);
                        
                        // 更新进度
                        processedFiles++;
                        progressBar.style.width = `${(processedFiles / totalFiles) * 100}%`;
                    } catch (error) {
                        showFeedback(
                            document.getElementById('comment-feedback'), 
                            error.message, 
                            true
                        );
                        document.getElementById('comment-feedback').classList.remove('hidden');
                    }
                }
                
                // 渲染图片预览
                renderCommentImagePreviews();
                
                // 3秒后隐藏进度条
                setTimeout(() => {
                    progressContainer.classList.add('hidden');
                }, 1000);
                
            } catch (error) {
                showFeedback(
                    document.getElementById('comment-feedback'), 
                    error.message, 
                    true
                );
                document.getElementById('comment-feedback').classList.remove('hidden');
                progressContainer.classList.add('hidden');
            }
            
            // 清空文件输入，允许重复选择同一文件
            e.target.value = '';
        }
        
        // 处理帖子图片上传
        async function handlePostImageUpload(e) {
            const files = e.target.files;
            if (!files || files.length === 0) return;
            
            // 显示进度条
            const progressContainer = document.getElementById('post-upload-progress');
            const progressBar = document.getElementById('post-progress-bar');
            progressContainer.classList.remove('hidden');
            progressBar.style.width = '0%';
            
            try {
                // 计算总文件数和已处理数
                const totalFiles = Math.min(files.length, IMAGE_CONFIG.maxPostImages - postImages.length);
                let processedFiles = 0;
                
                // 处理每个文件
                for (let i = 0; i < files.length; i++) {
                    // 检查是否已达到最大数量
                    if (postImages.length >= IMAGE_CONFIG.maxPostImages) {
                        showFeedback(
                            document.getElementById('content-feedback'), 
                            `最多只能上传${IMAGE_CONFIG.maxPostImages}张图片`, 
                            true
                        );
                        break;
                    }
                    
                    try {
                        // 压缩图片
                        const compressedDataUrl = await compressImage(files[i]);
                        
                        // 添加到帖子图片数组
                        postImages.push(compressedDataUrl);
                        
                        // 更新进度
                        processedFiles++;
                        progressBar.style.width = `${(processedFiles / totalFiles) * 100}%`;
                    } catch (error) {
                        showFeedback(
                            document.getElementById('content-feedback'), 
                            error.message, 
                            true
                        );
                    }
                }
                
                // 渲染图片预览
                renderPostImagePreviews();
                
                // 3秒后隐藏进度条
                setTimeout(() => {
                    progressContainer.classList.add('hidden');
                }, 1000);
                
            } catch (error) {
                showFeedback(
                    document.getElementById('content-feedback'), 
                    error.message, 
                    true
                );
                progressContainer.classList.add('hidden');
            }
            
            // 清空文件输入，允许重复选择同一文件
            e.target.value = '';
        }
        
        // 渲染评论图片预览
        function renderCommentImagePreviews() {
            const previewContainer = document.getElementById('comment-image-previews');
            previewContainer.innerHTML = '';
            
            commentImages.forEach((imgUrl, index) => {
                const preview = document.createElement('div');
                preview.className = 'image-preview-container';
                preview.innerHTML = `
                    <img src="${imgUrl}" alt="预览图" class="image-preview">
                    <div class="remove-image" onclick="removeCommentImage(${index})">×</div>
                `;
                previewContainer.appendChild(preview);
            });
        }
        
        // 渲染帖子图片预览
        function renderPostImagePreviews() {
            const previewContainer = document.getElementById('post-image-previews');
            previewContainer.innerHTML = '';
            
            postImages.forEach((imgUrl, index) => {
                const preview = document.createElement('div');
                preview.className = 'image-preview-container';
                preview.innerHTML = `
                    <img src="${imgUrl}" alt="帖子图片预览" class="image-preview">
                    <div class="remove-image" onclick="removePostImage(${index})">×</div>
                `;
                previewContainer.appendChild(preview);
            });
        }
        
        // 移除评论图片
        function removeCommentImage(index) {
            commentImages.splice(index, 1);
            renderCommentImagePreviews();
        }
        
        // 移除帖子图片
        function removePostImage(index) {
            postImages.splice(index, 1);
            renderPostImagePreviews();
        }
        
        // 清空评论图片
        function clearCommentImages() {
            commentImages = [];
            document.getElementById('comment-image-previews').innerHTML = '';
            document.getElementById('comment-input').value = '';
        }
        
        // 清空帖子图片
        function clearPostImages() {
            postImages = [];
            document.getElementById('post-image-previews').innerHTML = '';
        }
        
        // 渲染帖子列表
        function renderPosts() {
            const postsContainer = document.getElementById('posts-container');
            postsContainer.innerHTML = '';
            
            postsData.forEach(post => {
                const postCard = document.createElement('div');
                postCard.className = 'post-card';
                postCard.onclick = (e) => {
                    // 如果点击的是删除按钮，不打开详情
                    if (!e.target.closest('.delete-btn')) {
                        showPostDetails(post.id);
                    }
                };
                
                // 只对自己发布的帖子显示删除按钮
                const deleteBtnHtml = post.author === "当前用户" 
                    ? `<button class="delete-btn post-delete-btn" onclick="handlePostDeleteClick(${post.id}, event)">
                        <iconify-icon icon="mdi:delete"></iconify-icon>
                        删除
                       </button>` 
                    : '';
                
                postCard.innerHTML = `
                    ${deleteBtnHtml}
                    <h3 class="post-title">${post.title}</h3>
                    <img src="${post.thumbnail}" alt="${post.title}" class="post-thumbnail">
                    <p class="post-content">${post.content.replace(/<[^>]*>?/gm, '').substring(0, 100)}...</p>
                    <div class="post-footer">
                        <div class="author">
                            <iconify-icon icon="mdi:account-circle"></iconify-icon>
                            <span>${post.author}</span>
                        </div>
                        <div class="post-date">${post.date}</div>
                    </div>
                `;
                postsContainer.appendChild(postCard);
            });
        }
        
        // 显示帖子详情
        function showPostDetails(postId) {
            // 查找对应的帖子数据
            const post = postsData.find(p => p.id === postId);
            if (!post) return;
            
            // 记录当前查看的帖子ID
            currentPostId = postId;
            
            // 控制详情页删除按钮的显示
            const deleteBtn = document.getElementById('detail-post-delete-btn');
            if (post.author === "当前用户") {
                deleteBtn.classList.remove('hidden');
            } else {
                deleteBtn.classList.add('hidden');
            }
            
            // 更新详情页内容
            document.getElementById('detail-title').textContent = post.title;
            document.getElementById('detail-author').textContent = post.author;
            document.getElementById('detail-date').textContent = post.date;
            document.getElementById('detail-content').innerHTML = post.content;
            
            // 显示帖子图片
            const imagesContainer = document.getElementById('post-images-container');
            imagesContainer.innerHTML = '';
            if (post.images && post.images.length > 0) {
                post.images.forEach(imgUrl => {
                    const imgElement = document.createElement('img');
                    imgElement.src = imgUrl;
                    imgElement.alt = '帖子图片';
                    imgElement.className = 'post-image';
                    imagesContainer.appendChild(imgElement);
                });
            } else {
                imagesContainer.innerHTML = '';
            }
            
            // 更新评论计数
            document.getElementById('comments-count').textContent = post.comments.length;
            
            // 渲染评论
            renderComments(postId);
            
            // 显示详情页，隐藏列表
            document.querySelector('.posts').classList.add('hidden');
            document.getElementById('post-detail').classList.remove('hidden');
            document.querySelector('.tabs').classList.add('hidden');
            
            // 添加代码复制功能
            addCopyFunctionality();
        }
        
        // 渲染评论
        function renderComments(postId) {
            const post = postsData.find(p => p.id === postId);
            if (!post) return;
            
            const commentsContainer = document.getElementById('comments-container');
            commentsContainer.innerHTML = '';
            
            post.comments.forEach((comment, index) => {
                // 生成图片HTML
                let imagesHtml = '';
                if (comment.images && comment.images.length > 0) {
                    comment.images.forEach(imgUrl => {
                        imagesHtml += `<img src="${imgUrl}" alt="评论图片" class="comment-image">`;
                    });
                }
                
                // 只对自己发布的评论显示删除按钮
                const deleteBtnHtml = comment.author === "当前用户" 
                    ? `<button class="delete-btn" onclick="handleCommentDeleteClick(${postId}, ${index}, event)">
                        <iconify-icon icon="mdi:delete"></iconify-icon>
                        删除
                       </button>` 
                    : '';
                
                const commentElement = document.createElement('div');
                commentElement.className = 'comment';
                commentElement.innerHTML = `
                    <div class="comment-header">
                        <div class="comment-author">
                            <iconify-icon icon="mdi:account-circle"></iconify-icon>
                            <span>${comment.author}</span>
                        </div>
                        <div class="comment-time">${comment.time} ${deleteBtnHtml}</div>
                    </div>
                    <p>${comment.content}</p>
                    ${imagesHtml}
                    <div class="comment-reply">
                        <iconify-icon icon="mdi:reply"></iconify-icon>
                        回复
                    </div>
                `;
                commentsContainer.appendChild(commentElement);
            });
        }
        
        // 添加代码复制功能
        function addCopyFunctionality() {
            document.querySelectorAll('.code-block').forEach(block => {
                // 避免重复添加按钮
                if (block.querySelector('.copy-btn')) return;
                
                const button = document.createElement('button');
                button.className = 'copy-btn';
                button.innerHTML = '复制代码';
                button.onclick = function() {
                    const text = block.textContent.replace('复制代码', '').trim();
                    navigator.clipboard.writeText(text)
                        .then(() => {
                            button.innerHTML = '已复制!';
                            setTimeout(() => {
                                button.innerHTML = '复制代码';
                            }, 2000);
                        })
                        .catch(err => {
                            console.error('无法复制文本: ', err);
                            button.innerHTML = '复制失败';
                            setTimeout(() => {
                                button.innerHTML = '复制代码';
                            }, 2000);
                        });
                };
                block.appendChild(button);
            });
        }
        
        // 关闭帖子详情
        function closePostDetail() {
            document.querySelector('.posts').classList.remove('hidden');
            document.getElementById('post-detail').classList.add('hidden');
            document.querySelector('.tabs').classList.remove('hidden');
            currentPostId = null; // 重置当前帖子ID
            
            // 清空评论图片预览
            clearCommentImages();
        }
        
        // 帖子发布功能
        function publishNewPost() {
            const title = document.getElementById('post-title').value.trim();
            const content = document.getElementById('post-content').value.trim();
            let isValid = true;
            
            // 验证标题
            if (!title) {
                document.getElementById('post-title').classList.add('error');
                showFeedback(document.getElementById('title-feedback'), '标题不能为空', true);
                isValid = false;
            } else if (title.length < 5) {
                document.getElementById('post-title').classList.add('error');
                showFeedback(document.getElementById('title-feedback'), '标题不能少于5个字符', true);
                isValid = false;
            } else if (title.length > 100) {
                document.getElementById('post-title').classList.add('error');
                showFeedback(document.getElementById('title-feedback'), '标题不能超过100个字符', true);
                isValid = false;
            } else {
                document.getElementById('post-title').classList.remove('error');
                showFeedback(document.getElementById('title-feedback'), '');
            }
            
            // 验证内容（标题+内容+图片至少有一个有效）
            if (!content && postImages.length === 0) {
                document.getElementById('post-content').classList.add('error');
                showFeedback(document.getElementById('content-feedback'), '内容和图片不能同时为空', true);
                isValid = false;
            } else if (content.length > 5000) {
                document.getElementById('post-content').classList.add('error');
                showFeedback(document.getElementById('content-feedback'), '内容不能超过5000个字符', true);
                isValid = false;
            } else {
                document.getElementById('post-content').classList.remove('error');
                showFeedback(document.getElementById('content-feedback'), '');
            }
            
            if (!isValid) return;
            
            // 显示加载状态
            document.getElementById('post-submit-text').classList.add('hidden');
            document.getElementById('post-submit-loading').classList.remove('hidden');
            document.getElementById('post-submit').disabled = true;
            
            // 模拟API请求延迟
            setTimeout(() => {
                // 生成当前日期
                const today = new Date();
                const dateString = `${today.getFullYear()}-${(today.getMonth() + 1).toString().padStart(2, '0')}-${today.getDate().toString().padStart(2, '0')}`;
                
                // 确定缩略图（使用第一张上传的图片或随机图片）
                let thumbnailUrl;
                if (postImages.length > 0) {
                    thumbnailUrl = postImages[0];
                } else {
                    const randomImgId = Math.floor(Math.random() * 1000);
                    thumbnailUrl = `https://picsum.photos/seed/${randomImgId}/600/400`;
                }
                
                // 创建新帖子数据
                const newPost = {
                    id: Date.now(), // 使用时间戳作为唯一ID
                    title: title,
                    content: content ? `<p>${content.replace(/\n/g, '</p><p>')}</p>` : '', // 简单处理换行
                    author: "当前用户",
                    date: dateString,
                    thumbnail: thumbnailUrl,
                    images: [...postImages], // 复制图片数组
                    comments: []
                };
                
                // 添加到帖子数据数组
                postsData.unshift(newPost);
                
                // 重新渲染帖子列表
                renderPosts();
                
                // 关闭模态框并清空图片
                closeModal();
                clearPostImages();
                
                // 恢复按钮状态
                document.getElementById('post-submit-text').classList.remove('hidden');
                document.getElementById('post-submit-loading').classList.add('hidden');
                document.getElementById('post-submit').disabled = false;
                
            }, 1000);
        }
        
        // 发布评论功能
        document.getElementById('comment-submit').addEventListener('click', publishComment);
        
        function publishComment() {
            // 如果没有当前帖子ID，不执行评论发布
            if (currentPostId === null) return;
            
            const content = document.getElementById('comment-input').value.trim();
            
            // 内容和图片至少需要有一个
            if ((!content || content.length < 1) && commentImages.length === 0) {
                document.getElementById('comment-input').classList.add('error');
                showFeedback(document.getElementById('comment-feedback'), '评论内容或图片不能为空', true);
                document.getElementById('comment-feedback').classList.remove('hidden');
                return;
            }
            
            if (content.length > 500) {
                document.getElementById('comment-input').classList.add('error');
                showFeedback(document.getElementById('comment-feedback'), '评论内容不能超过500个字符', true);
                document.getElementById('comment-feedback').classList.remove('hidden');
                return;
            }
            
            // 清除错误状态
            document.getElementById('comment-input').classList.remove('error');
            document.getElementById('comment-feedback').classList.add('hidden');
            
            // 显示加载状态
            document.getElementById('submit-text').classList.add('hidden');
            document.getElementById('submit-loading').classList.remove('hidden');
            document.getElementById('comment-submit').disabled = true;
            
            // 模拟API请求
            setTimeout(() => {
                const now = new Date();
                const timeString = `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')} ${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
                
                // 查找当前帖子并添加评论
                const postIndex = postsData.findIndex(p => p.id === currentPostId);
                if (postIndex !== -1) {
                    postsData[postIndex].comments.push({
                        author: "当前用户",
                        content: content,
                        time: timeString,
                        images: [...commentImages] // 复制图片数组
                    });
                    
                    // 更新评论显示
                    renderComments(currentPostId);
                    document.getElementById('comments-count').textContent = postsData[postIndex].comments.length;
                }
                
                // 清空输入框和图片预览
                clearCommentImages();
                
                // 显示成功反馈
                showFeedback(document.getElementById('comment-feedback'), '评论发布成功！');
                document.getElementById('comment-feedback').classList.remove('hidden');
                document.getElementById('comment-feedback').classList.add('success-feedback');
                
                // 3秒后隐藏反馈
                setTimeout(() => {
                    document.getElementById('comment-feedback').classList.add('hidden');
                }, 3000);
                
                // 恢复按钮状态
                document.getElementById('submit-text').classList.remove('hidden');
                document.getElementById('submit-loading').classList.add('hidden');
                document.getElementById('comment-submit').disabled = false;
                
            }, 800);
        }
        
        // 处理帖子删除点击
        function handlePostDeleteClick(postId, event) {
            event.stopPropagation(); // 阻止事件冒泡，避免打开帖子详情
            
            const post = postsData.find(p => p.id === postId);
            if (post && post.author === "当前用户") {
                itemToDelete = {
                    type: 'post',
                    id: postId
                };
                openConfirmDeleteModal();
            }
        }
        
        // 处理评论删除点击
        function handleCommentDeleteClick(postId, commentIndex, event) {
            event.stopPropagation();
            
            const post = postsData.find(p => p.id === postId);
            if (post && post.comments[commentIndex] && post.comments[commentIndex].author === "当前用户") {
                itemToDelete = {
                    type: 'comment',
                    postId: postId,
                    commentIndex: commentIndex
                };
                openConfirmDeleteModal();
            }
        }
        
        // 打开确认删除模态框
        function openConfirmDeleteModal() {
            document.getElementById('confirm-delete-modal').classList.add('active');
            
            // 根据删除类型更新消息
            if (itemToDelete.type === 'post') {
                document.getElementById('delete-confirmation-message').textContent = 
                    '你确定要删除这个帖子吗？此操作无法撤销。';
            } else {
                document.getElementById('delete-confirmation-message').textContent = 
                    '你确定要删除这条评论吗？此操作无法撤销。';
            }
        }
        
        // 关闭确认删除模态框
        function closeConfirmDeleteModal() {
            document.getElementById('confirm-delete-modal').classList.remove('active');
            itemToDelete = null;
        }
        
        // 执行删除操作
        function performDelete() {
            if (!itemToDelete) return;
            
            if (itemToDelete.type === 'post') {
                // 删除帖子
                postsData = postsData.filter(post => post.id !== itemToDelete.id);
                
                // 如果删除的是当前查看的帖子，返回列表
                if (currentPostId === itemToDelete.id) {
                    closePostDetail();
                }
                
                // 重新渲染帖子列表
                renderPosts();
            } else if (itemToDelete.type === 'comment') {
                // 删除评论
                const postIndex = postsData.findIndex(p => p.id === itemToDelete.postId);
                if (postIndex !== -1) {
                    postsData[postIndex].comments.splice(itemToDelete.commentIndex, 1);
                    
                    // 更新评论显示
                    renderComments(itemToDelete.postId);
                    document.getElementById('comments-count').textContent = postsData[postIndex].comments.length;
                }
            }
            
            // 关闭确认模态框
            closeConfirmDeleteModal();
        }
        
        // 辅助函数：显示反馈信息
        function showFeedback(element, message, isError = false) {
            element.textContent = message;
            element.style.color = isError ? '#E53E3E' : '#38A169';
        }
        
        // 绑定模态框控制
        document.getElementById('post-submit').addEventListener('click', publishNewPost);
        
        function openModal() {
            document.getElementById('publish-modal').classList.add('active');
            // 重置表单
            document.getElementById('post-title').value = '';
            document.getElementById('post-content').value = '';
            document.getElementById('post-title').classList.remove('error');
            document.getElementById('post-content').classList.remove('error');
            document.getElementById('title-feedback').textContent = '';
            document.getElementById('content-feedback').textContent = '';
            clearPostImages();
        }
        
        function closeModal() {
            document.getElementById('publish-modal').classList.remove('active');
        }
        
        // 标签切换功能
        document.querySelectorAll('.tab').forEach(tab => {
            tab.addEventListener('click', function() {
                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                // 这里可以添加标签切换时的逻辑，如排序等
            });
        });
        
        // 评论框Enter键提交
        document.getElementById('comment-input').addEventListener('keydown', (e) => {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                publishComment();
            }
        });
        
        // 输入框聚焦时移除错误状态
        document.getElementById('comment-input').addEventListener('focus', () => {
            document.getElementById('comment-input').classList.remove('error');
            document.getElementById('comment-feedback').classList.add('hidden');
        });
        
        document.getElementById('post-title').addEventListener('focus', () => {
            document.getElementById('post-title').classList.remove('error');
            showFeedback(document.getElementById('title-feedback'), '');
        });
        
        document.getElementById('post-content').addEventListener('focus', () => {
            document.getElementById('post-content').classList.remove('error');
            showFeedback(document.getElementById('content-feedback'), '');
        });
    </script>

<!-- Code injected by live-server -->
<script>
	// <![CDATA[  <-- For SVG support
	if ('WebSocket' in window) {
		(function () {
			function refreshCSS() {
				var sheets = [].slice.call(document.getElementsByTagName("link"));
				var head = document.getElementsByTagName("head")[0];
				for (var i = 0; i < sheets.length; ++i) {
					var elem = sheets[i];
					var parent = elem.parentElement || head;
					parent.removeChild(elem);
					var rel = elem.rel;
					if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
						var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
						elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
					}
					parent.appendChild(elem);
				}
			}
			var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
			var address = protocol + window.location.host + window.location.pathname + '/ws';
			var socket = new WebSocket(address);
			socket.onmessage = function (msg) {
				if (msg.data == 'reload') window.location.reload();
				else if (msg.data == 'refreshcss') refreshCSS();
			};
			if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
				console.log('Live reload enabled.');
				sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
			}
		})();
	}
	else {
		console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
	}
	// ]]>
</script>


    </body></html>